.macbook{
  font-size:40px;
  width:20em;
  display:flex;
  align-items:center;
  flex-direction:column;
  transition: all 1s;
}
.macbook:hover {
  transform: scale(1.5);
}
.screen{
  height:9em;
  width:16em;
  background:url("../img/manage.png") no-repeat;
  background-size: 100% 100%;
  border:0.2em solid silver;
  border-radius:3% 3% 0 0 / 5%;
  border-bottom:none;
  position:relative;
}
.screen::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  background:radial-gradient(
    circle at right bottom,
    rgba(255,255,255,0.4) 75%,
    rgba(255,255,255,0.6) 75%
  );
  margin:4.2% 3.2%;
}
.base{
  height:0.7em;
  width:inherit;
  background:linear-gradient(
    white,
    white 55%,
    #999 60%,
    #222 90%,
    rgba(0,0,0,0.1) 100%
  );
    border-radius: 0 0 10% 10% / 0 0 50% 50%;
    position: relative;
}
.base::before{
  content:'';
  position:absolute;
  width:inherit;
  height:55%;
  background:linear-gradient(
    to right,
    rgba(0,0,0,0.5) 0%,
    rgba(255,255,255,0.8) 1%,
    rgba(0,0,0,0.4) 4%,
    transparent 15%,
    rgba(255,255,255,0.8) 50%,
    transparent calc(100% - 15%),
    rgba(0,0,0,0.4) calc(100% - 4%),
    rgba(255,255,255,0.8) calc(100% - 1%),
    rgba(0,0,0,0.5) 100%
  );
}
.base::after{
  content:'';
  position:absolute;
  width:3em;
  height:0.2em;
  background:#ddd;
  left: calc(50% - 3em / 2);
  box-shadow:
        inset -0.5em -0.1em 0.3em rgba(0, 0, 0, 0.2),
        inset 0.5em 0.1em 0.3em rgba(0, 0, 0, 0.2);
  border-radius: 0 0 7% 7% / 0 0 95% 95%;
}